<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #app {
        width: 500px;
        height: 500px;
        border: 1px solid red;
      }
      .ulstyle {
        width: 100%;
        height: 30px;
        display: flex;
        list-style: none;
        text-align: center;
        line-height: 30px;
      }
      li {
        flex: 1;
        background-color: aqua;
      }
      /* .active{
            background-color: red ;
        } */
    </style>
  </head>
  <body>
    <div id="app">
      <ul :class="ulstyle">
        <li :style="num==1?active:hide" @click="changeTab(1)">一</li>
        <li @click="changeTab(2)" :style="num==2?active:hide">二</li>
        <li @click="changeTab(3)" :style="num==3?active:hide">三</li>
      </ul>
      <div :style="box"></div>
    </div>
  </body>
  <script src="../../vue.js"></script>
  <script>
    //三种不更新情况  数组的修改 数组长度  对象的新增  //解决方法用 Vue.set(vm.arr,1(索引),6(要修改的值))
    ////解决方法用 Vue.set(vm.ojb,sex(键名),6(键值))，有就修改没有就新增 键名加引号
    new Vue({
      el: "#app",
      data: {
        ulstyle: "ulstyle",
        num: 1,
        active: {
          background: "red",
        },
        hide: {
          background: "white",
        },
        box: {
          width: "100%",
          height: "100%",
          background: "skyblue",
        },
      },
      methods: {
        changeTab(num) {
            console.log(this);
          this.num = num;
          if (this.num == 1) {
            this.box.background = "skyblue";
          } else if (this.num == 2) {
            this.box.background = "blue";
          } else {
            this.box.background = "pink";
          }
        },
      },
    });
  </script>
</html>
